<template>
<div id="register">
	<div id="title">
			<p class="iconfont icon-fanhui" @click="test()"></p>
			<router-link to="/home"><img src="~@/img/logo_mtime.png" /></router-link>
		</div>
	<div id="cont">
		<li><label>手机号：</label><input type="text" name="username" id="username" value="" placeholder="请输入用户名"/><input type="button" name="bon" id="bon" value="获取验证码" /></li>
			<p id="msg"></p>
			<li><label>验证码：</label><input type="text" name="password" id="password" value="" placeholder="请输入密码"/></li>
			<p id="msg2"></p>
			<li><label>密码：</label><input type="password1" name="password1" id="password1" value="" placeholder="6-20位字母、数字、符号组成"/></li>
			<p id="msg1"></p>
			<input type="button" name="btn" id="btn" value="注册" />
	</div>
</div>
</template>

<script>
	import footerToggle from "@/md/footerToggle.js"
	import headerToggle from "@/md/headerToggle.js"
	import $			from "jquery"
	export default{
		data(){
			return{
				
			}
		},
		mounted(){
			footerToggle.show();
			headerToggle.hide();
			
			$(function(){
				function getNumber(){
			var num = '';
			for(var i = 0 ; i < 6 ; i ++){
				var sum = Math.floor(Math.random()*10);
				num += sum;
			}
			return num;
		}
				$('#bon').click(function(){
				$('#password').val(getNumber());
				})
//				var oReg2 = /^\d{6}&/;
//				$('#password').blur(function() {
//					if(oReg2.test($('#password').val())){
//						$('#msg2').html('验证码正确');
//					}else{
//						$('#msg2').html('请输入正确验证码');
//					}
//				})
				var oReg = /^1\d{10}$/;
						$('#username').blur(function() {
							if(oReg.test($('#username').val())) {
								$('#msg').html('手机号正确');
							} else {
								$('#msg').html('请输入正确的手机号');
							}
						})
						var oReg1 = /^[a-zA-Z0-9]{4,16}$/;
						$('#password1').blur(function() {
									if(oReg1.test($('#password1').val())) {
										$('#msg1').html('密码正确');
				}else{
					$('#msg1').html('请输入正确的密码');
				}
			})
				$('#btn').click(function(){
					var user = $("#username").val();
					var pass = $("#password").val();
				if(oReg.test($('#username').val())) {
					$.ajax({
				type:"get",
				url:"http://localhost:3000/reg",
				data:{
					username:user,
					password:pass
				},
				success:function(data){
					if(data == "1"){
						window.location.href = "http://10.8.154.144:8080/home";
					}else{
						window.location.href = "http://10.8.154.144:8080/login";
					}
				}
				
			});
				}
				
			})			
			})
			
			
		},
		methods:{
			test() {
				window.history.go(-1);
			}
		},
		components:{
			
		}
	}
</script>

<style scoped lang="scss">
	@import "~@/scss/main.scss";
#register{	
	
	#title {
			width: 375px;
			height: 53px;
			background: #1C2635;
			.iconfont {
				color: #B5B8BD;
				float: left;
				font-size: 24px;
				margin: 12px 0 0 12px;
			}
			a {
				float: left;
				@include rect(0.73rem, 0.22rem);
				img {
					float: left;
					@include rect(0.73rem, 0.22rem);
					margin: 20px 120px 10px;
				}
			}
		}
	#cont{
			list-style: none;
			@include rect(100%,1.17rem);
			li{
				@include rect(100%,0.58rem);
				border-bottom: solid 1px #eee;
				label{
					float:left;
					@include rect(0.9rem,0.29rem);
					line-height:58px;
					margin: 0 10px;
					font-size:16px;
				}
				#username{
					width:150px;
				}
				#bon{
					width:90px;
					float:left;
					line-height:45px;
					border-radius: 30px;
					background: #fff;
					border: 1px solid #1e7dd7;
					color:#1e7dd7;
				}
				input{
					float:left;
					@include rect(2.3rem,0.45rem);
					border:0;
					line-height:58px;
					margin:5px 0;
					font-size:16px;
				}
				
			}
			#btn{
					width:339px;
					height:51px;
					background:#1e7dd7;
					border: 1px solid #1e7dd7;
					color:#fff;
					font-size:20px;
					border-radius: 30px;
					margin:20px 17px 20px;
				}
				#msg2,#msg,#msg1{
			width:100%;
			height:20px;
		}
		}
}
</style>